<template>
	<div class="fenxi">
		<div class="swiper-slide-nav">
			<span 
				v-for='(item,index) in navList' 
				:class="currentNav==index?'hover':''"
				@click='currentNav=index'
				>{{item}}</span>
		</div>
		<div class="swiper-slide-con">
			<div class="swiper-slide-item" v-if='currentNav == 0'>
				<template v-if='tableList.length'>
					<div class="info">
						<span class="fontweb">{{ AgainstHistory.name | textNull}}</span>
						<span class="red">{{ AgainstHistory.win }}胜</span>
						<span class="bule">{{ AgainstHistory.draw }}平</span>
						<span class="green">{{ AgainstHistory.lose }}负</span>
					</div>
					<div class="table">
						<table>
							<tr>
								<th>赛事</th>
								<th>时间</th>
								<th>主队</th>
								<th>比分</th>
								<th>客队</th>
								<th>赛果</th>
							</tr>
							<tr v-for='(item,index) in tableList'>
								<td>{{item.ln}}</td>
								<td>{{ item.mt }}</td>
								<td>{{ item.hz}}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
									{{ item.hm_hs | textNull }}:
									{{ item.aw_hs | textNull }}
									</p>
									<span>
										({{ item.hm_fs | textNull }}:
										{{ item.aw_fs | textNull }})
									</span>
								</td>
								<td>{{ item.az }}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
										{{ item.mrs }}
									</p>
								</td>
							</tr>
						</table>
					</div>
				</template>
				<div v-else class="noData">暂无数据！</div>
			</div>
			<div class="swiper-slide-item" v-if='currentNav == 1'>
				<template v-if='HomeInfo'>
					<div class="info">
						<span class="fontweb">{{ RecentAllHome.name | textNull}}</span>
						<span>近十场</span>
						<span class="red">{{ HomeInfo.win }}胜</span>
						<span class="bule">{{ HomeInfo.draw }}平</span>
						<span class="green">{{ HomeInfo.lose }}负</span>
						<div class="rigth">
							<span 
								:class="HomeCurrent==0?'hover':''"
								@click='RecentAllHomes = null;HomeCurrent = 0'
							>全部</span>
							<span>|</span>
							<span 
								:class="HomeCurrent==1?'hover':''"
								@click='changeHomeInfo(1)'
							>主场</span>
						</div>
					</div>
					<div class="table">
						<table>
							<tr>
								<th>赛事</th>
								<th>时间</th>
								<th>主队</th>
								<th>比分</th>
								<th>客队</th>
								<th>赛果</th>
							</tr>
							<tr v-for='(item,index) in HomeInfo.zj'>
								<td>{{item.ln}}</td>
								<td>{{ item.mt }}</td>
								<td>{{ item.hz}}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
									{{ item.hm_hs | textNull }}:
									{{ item.aw_hs | textNull }}
									</p>
									<span>
										({{ item.hm_fs | textNull }}:
										{{ item.aw_fs | textNull }})
									</span>
								</td>
								<td>{{ item.az }}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
										{{ item.mrs }}
									</p>
								</td>
							</tr>
						</table>
					</div>
					<p class="bggray"></p>
					<div class="info">
						<span class="fontweb">{{ RecentAllAway.name | textNull}}</span>
						<span>近十场</span>
						<span class="red">{{ AwayInfo.win }}胜</span>
						<span class="bule">{{ AwayInfo.draw }}平</span>
						<span class="green">{{ AwayInfo.lose }}负</span>
						<div class="rigth">
							<span 
								:class="AwayCurrent==0?'hover':''"
								@click='RecentAllAways = null;AwayCurrent = 0'
							>全部</span>
							<span>|</span>
							<span 
								:class="AwayCurrent==1?'hover':''"
								@click='changeHomeInfo(2)'
							>客场</span>
						</div>
					</div>
					<div class="table">
						<table>
							<tr>
								<th>赛事</th>
								<th>时间</th>
								<th>主队</th>
								<th>比分</th>
								<th>客队</th>
								<th>赛果</th>
							</tr>
							<tr v-for='(item,index) in AwayInfo.zj'>
								<td>{{item.ln}}</td>
								<td>{{ item.mt }}</td>
								<td>{{ item.hz}}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
									{{ item.hm_hs | textNull }}:
									{{ item.aw_hs | textNull }}
									</p>
									<span>
										({{ item.hm_fs | textNull }}:
										{{ item.aw_fs | textNull }})
									</span>
								</td>
								<td>{{ item.az }}</td>
								<td>
									<p 
										:class="item.mrs=='负'?'green':item.mrs=='胜'?'red':'bule'"
									>
										{{ item.mrs }}
									</p>
								</td>
							</tr>
						</table>
					</div>
				</template>
				<div v-else class="noData">暂无数据！</div>
			</div>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'deatilFenxi',
	props:{
      AgainstHistory:Object,
      tableList:Array,
      RecentAllHome:Object,
      RecentAllAway:Object,
    },
	data: function(){
		return {
			currentNav:0,
			navList:["交战历史",'近期战绩'],
			RecentAllHomes:null,
			RecentAllAways:null,
			HomeCurrent:0,
			AwayCurrent:0,
		}
	},
	computed:{
		HomeInfo:function(){
			if (this.RecentAllHomes === null) {
				return this.RecentAllHome
			}else{
				return this.RecentAllHomes
			}
			
		},
		AwayInfo:function(){
			if (this.RecentAllAways === null) {
				return this.RecentAllAway
			}else{
				return this.RecentAllAways
			}
		}
	},
	methods:{
		//球队主场或客场战绩
		//type 1代表主场球队主场的战绩，2代表客场球队客场的战绩
		getHistoryMatch:function(id,type){
			var t = this;
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
			axios.get('/api/getHistoryMatch.php',{
				params:{
					'sportType':'23',
					'id':id,
					'court':type
				}})
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						if (type==1) {
							t.RecentAllHomes = data;
						}
						if (type==2) {
							t.RecentAllAways = data;
						}
					}else{
						Toast(res.message)
						if (type==1) {
							t.RecentAllAways = '';
						}
						if (type==2) {
							t.RecentAllAways = '';
						}
					}
					Indicator.close();
				})
				.catch(function (error) {
					Indicator.close();
				    console.log(error);
				});
		},
		changeHomeInfo:function(type){
			var id = this.$route.params.id;
			this.getHistoryMatch(id,type)
			if (type == 1) {
				this.HomeCurrent = 1;
			}
			if (type == 2) {
				this.AwayCurrent = 1;
			}
		}
	},
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.swiper-slide-nav{
		margin: .2rem .36rem;
		background-color:@bggray;
		border-radius: .1rem;
		height: .66rem;
		line-height: .66rem;
		display: flex;
		overflow: hidden;
		span{
			flex: 1;
			text-align: center;
			color: #333;
			&.hover{
				color: #fff;
				background-color:@greenColor;
			}
		}
	}
	.info{
		padding: .4rem .3rem .2rem;
		span{
			padding-right: .1rem;
		}
	}
	.red{
		color: #f00;
	}
	.bule{
		color:#008eff;
	}
	.green{
		color: #13b665;
	}
	.rigth{
		float: right;
		.hover{
			color: @greenColor;
			font-weight: bold;
		}
	}
	.fontweb{
		font-weight: bold;
	}
	table{
		.block{
			display: block;
		    width: 0.36rem;
		    height: 0.36rem;
		    margin: auto;
		    text-align: center;
		    line-height: 0.36rem;
		    background-color:@greenColor;
		    color: #fff;
		}
		p{
			font-weight: bold;
		}
		.hover{
			background-color:@greenColor;
			td{
				color: #fff;
			}
			.block{
				background-color:#fff;
				color: @greenColor;
			}
		}
	}
	.bggray{
		height: .3rem;
		background-color:@bggray;
	}
</style>